<%@ include file="../common/Top.jsp"%>

<!-- breadcrumb-section start -->
<nav class="breadcrumb-section theme1 breadcrumb-bg1">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<div class="breadcrumb-title text-center my-20">
					<h2 class="title text-dark text-capitalize">Hair Care</h2>
				</div>
			</div>
			<div class="col-12">
				<ol class="breadcrumb bg-transparent m-0 p-0 align-items-center justify-content-center">
					<li class="breadcrumb-item"><a href="index.html">Home</a></li>
					<li class="breadcrumb-item active" aria-current="page">Hair Care</li>
				</ol>
			</div>
		</div>
	</div>
</nav>
<!-- breadcrumb-section end -->
<!-- product tab start -->
<div class="product-tab pb-70">
	<div class="container grid-wraper">
		<div class="grid-nav-wraper mb-30">
			<div class="row align-items-center">
				<div class="col-12 col-md-6 mb-3 mb-md-0">
					<nav class="shop-grid-nav">
						<ul class="nav nav-pills align-items-center" id="pills-tab" role="tablist">
							<li class="nav-item">
								<a class="nav-link" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">
									<i class="fa fa-th"></i>

								</a>
							</li>
							<li class="nav-item mr-0">
								<a class="nav-link active" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false"><i
										class="fa fa-list"></i></a>
							</li>
							<li> <span class="total-products text-capitalize">There are 13 products.</span></li>
						</ul>
					</nav>
				</div>
				<div class="col-12 col-md-6 position-relative">
					<div class="shop-grid-button d-flex align-items-center">
						<span class="sort-by">Sort by:</span>
						<button class="btn-dropdown d-flex justify-content-between" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							Relevance <span class="ion-android-arrow-dropdown"></span>
						</button>
						<div class="dropdown-menu shop-grid-menu" aria-labelledby="dropdownMenuButton">
							<a class="dropdown-item" href="#">Relevance</a>
							<a class="dropdown-item" href="#"> Name, A to Z</a>
							<a class="dropdown-item" href="#"> Name, Z to A</a>
							<a class="dropdown-item" href="#"> Price, low to high</a>
							<a class="dropdown-item" href="#"> Price, high to low</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- product-tab-nav end -->
		<div class="tab-content" id="pills-tabContent">
			<!-- first tab-pane -->
			<div class="tab-pane fade" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
				<div class="row grid-view theme1">
<%-----------------------------------------------------------------%>
					<div class="col-sm-6 col-md-4 col-lg-3 mb-30">
						<div class="card product-card">
							<div class="card-body p-0">
								<div class="product-thumbnail position-relative">
									<span class="badge badge-danger top-left">New</span>
									<a href="single-product.html">
										<img class="first-img" src="assets/img/product/1.jpg" alt="thumbnail">
									</a>
									<!-- product links -->
									<div class="product-links d-flex d-flex justify-content-between">
										<button class="pro-btn" data-toggle="modal" data-target="#add-to-cart" tabindex="0">Add
											to cart</button>
										<ul class="d-flex justify-content-center">
											<li>
												<a href="#" data-toggle="modal" data-target="#quick-view" tabindex="0">
													<span data-toggle="tooltip" data-placement="bottom" title="" class="ion-ios-search-strong" data-original-title="Quick view"></span>
												</a>
											</li>

											<li>
												<a href="#" data-toggle="modal" data-target="#compare" tabindex="0">
													<span data-toggle="tooltip" data-placement="bottom" title="" class="ion-ios-shuffle-strong" data-original-title="Add to compare"></span>
												</a>
											</li>
											<li>
												<a href="wishlist.html" tabindex="0">
													<span data-toggle="tooltip" data-placement="bottom" title="" class="ion-android-favorite-outline" data-original-title="add to wishlist"> </span>
												</a>
											</li>
										</ul>
										<!-- product links end-->
									</div>
									<!-- product links end-->
								</div>
								<div class="product-desc">
									<h3 class="title"><a href="shop-grid-4-column.html">New Luxury
										Men's Slim Fit Shirt Short Sleeve...</a></h3>
									<div class="star-rating my-10">
										<span class="ion-ios-star"></span>
										<span class="ion-ios-star"></span>
										<span class="ion-ios-star"></span>
										<span class="ion-ios-star"></span>
										<span class="ion-ios-star de-selected"></span>
									</div>
									<h6 class="product-price">$11.90</h6>
								</div>
							</div>
						</div>
						<!-- product-list End -->
					</div>
<%----------------------------------------------%>
				</div>
			</div>
			<!-- second tab-pane -->
			<div class="tab-pane fade active show" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
				<div class="row grid-view-list theme1">
<%--start-----------------------------------------------%>
					<c:forEach var="product" items="${sessionScope.productList}">
					<div class="col-12 mb-30">
						<div class="card product-card">
							<div class="card-body p-0">
								<div class="media flex-column flex-sm-row">
									<div class="product-thumbnail position-relative">
										<span class="badge badge-danger top-left">New</span>
										<a href="single-product.html">
											<img class="first-img" src="${product.description}" alt="thumbnail">
										</a>
										<!-- product links -->
										<div class="product-links d-flex d-flex justify-content-between">
											<button class="pro-btn" data-toggle="modal" data-target="#add-to-cart" tabindex="0">Add
												to cart</button>
											<ul class="d-flex justify-content-center">
												<li>
													<a href="#" data-toggle="modal" data-target="#quick-view" tabindex="0">
														<span data-toggle="tooltip" data-placement="bottom" title="" class="ion-ios-search-strong" data-original-title="Quick view"></span>
													</a>
												</li>

												<li>
													<a href="#" data-toggle="modal" data-target="#compare" tabindex="0">
														<span data-toggle="tooltip" data-placement="bottom" title="" class="ion-ios-shuffle-strong" data-original-title="Add to compare"></span>
													</a>
												</li>
												<li>
													<a href="wishlist.html" tabindex="0">
														<span data-toggle="tooltip" data-placement="bottom" title="" class="ion-android-favorite-outline" data-original-title="add to wishlist"> </span>
													</a>
												</li>
											</ul>
											<!-- product links end-->
										</div>
										<!-- product links end-->
									</div>
									<div class="media-body pl-sm-4 mt-30 mt-sm-0">
										<div class="product-desc">
											<h3 class="title"><a href="searchItems?productId=${product.productId}">${product.name}</a></h3>
											<div class="star-rating mb-10 mt-10">
												<span class="ion-ios-star"></span>
												<span class="ion-ios-star"></span>
												<span class="ion-ios-star"></span>
												<span class="ion-ios-star"></span>
												<span class="ion-ios-star de-selected"></span>
											</div>
<%--											<h6 class="product-price">$11.90</h6>--%>
										</div>
										<div class="availability-list pb-30 mt-20 border-bottom">
											<p>Availability: <span>1200 In Stock</span></p>
										</div>
										<ul class="product-list-des">
											<li>
												Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket.
											</li>
											<li>
												Part of the Kaval Collection.
											</li>
											<li>
												Regular fit is eased, but not sloppy, and perfect for any activity.
											</li>
											<li>
												Plain-woven jacket specifically constructed for freedom of movement.
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
						<!-- product-list End -->
					</div>
					</c:forEach>
<%-----------------------------------------------%>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-12">
				<nav class="pagination-section mt-30">
					<div class="row align-items-center">
						<div class="col-12">
							<ul class="pagination justify-content-center">
								<li class="page-item active"><a class="page-link" href="#">1</a></li>
								<li class="page-item"><a class="page-link" href="#">2</a></li>
								<li class="page-item">
									<a class="page-link" href="#"><i class="ion-chevron-right"></i></a>
								</li>
							</ul>
						</div>
					</div>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- product tab end -->


<!-- modals start -->

<!-- first modal -->
<div class="modal fade theme1 style1" id="quick-view" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-md-6 mb-5 mb-lg-0">
						<div class="product-sync-init mb-20">
							<div class="single-product">
								<div class="product-thumb">
									<img src="assets/img/slider/thumb/1.jpg" alt="product-thumb">
								</div>
							</div>
							<!-- single-product end -->
							<div class="single-product">
								<div class="product-thumb">
									<img src="assets/img/slider/thumb/2.jpg" alt="product-thumb">
								</div>
							</div>
							<!-- single-product end -->
							<div class="single-product">
								<div class="product-thumb">
									<img src="assets/img/slider/thumb/3.jpg" alt="product-thumb">
								</div>
							</div>
							<!-- single-product end -->
							<div class="single-product">
								<div class="product-thumb">
									<img src="assets/img/slider/thumb/4.jpg" alt="product-thumb">
								</div>
							</div>
							<!-- single-product end -->
						</div>

						<div class="product-sync-nav slick-nav-sync">
							<div class="single-product">
								<div class="product-thumb">
									<a href="javascript:void(0)"> <img src="assets/img/slider/thumb/1.1.jpg"
																	   alt="product-thumb"></a>
								</div>
							</div>
							<!-- single-product end -->
							<div class="single-product">
								<div class="product-thumb">
									<a href="javascript:void(0)"> <img src="assets/img/slider/thumb/2.1.jpg"
																	   alt="product-thumb"></a>
								</div>
							</div>
							<!-- single-product end -->
							<div class="single-product">
								<div class="product-thumb">
									<a href="javascript:void(0)"><img src="assets/img/slider/thumb/3.1.jpg"
																	  alt="product-thumb"></a>
								</div>
							</div>
							<!-- single-product end -->
							<div class="single-product">
								<div class="product-thumb">
									<a href="javascript:void(0)"><img src="assets/img/slider/thumb/4.1.jpg"
																	  alt="product-thumb"></a>
								</div>
							</div>
							<!-- single-product end -->
							<div class="single-product">
								<div class="product-thumb">
									<a href="javascript:void(0)"><img src="assets/img/slider/thumb/2.1.jpg"
																	  alt="product-thumb"></a>
								</div>
							</div>
							<!-- single-product end -->
						</div>
					</div>
					<div class="col-md-6 mt-5 mt-md-0">
						<div class="modal-product-info">
							<div class="product-head">
								<h2 class="title">Brixton Patrol All Terrain Anorak Jacket</h2>
								<h4 class="sub-title">Reference: demo_5</h4>
								<div class="star-content mb-20">
									<span class="star-on"><i class="ion-ios-star"></i> </span>
									<span class="star-on"><i class="ion-ios-star"></i> </span>
									<span class="star-on"><i class="ion-ios-star"></i> </span>
									<span class="star-on"><i class="ion-ios-star"></i> </span>
									<span class="star-on de-selected"><i class="ion-ios-star"></i> </span>
								</div>
							</div>
							<div class="product-body">
                                    <span class="product-price text-center"> <span class="new-price">$29.00</span>
                                    </span>
								<p class="border-top pt-30">Whether you're exploring the woods or the city, the Brixton™ Patrol All </p>
								<ul>
									<li>Terrain Anorak Jacket has got you covered.</li>
									<li>Camo jacket crafted from 4.5 oz nylon ripstop with two-way stretch, and a water-repellent coating.</li>
									<li>Drawstring hood.</li>
								</ul>
							</div>
							<div class="product-size d-flex align-items-center mt-30">
								<h3 class="title">Dimension</h3>
								<select>
									<option value="0">S</option>
									<option value="1">M</option>
									<option value="2">L</option>
									<option value="3">XL</option>

								</select>
							</div>
							<div class="product-footer">
								<div class="product-count style d-flex flex-column flex-sm-row my-4">
									<div class="count d-flex">
										<input type="number" min="1" max="10" step="1" value="1">
										<div class="button-group">
											<button class="count-btn increment"><i
													class="fas fa-chevron-up"></i></button>
											<button class="count-btn decrement"><i
													class="fas fa-chevron-down"></i></button>
										</div>
									</div>
									<div>
										<button class="btn theme-btn--dark3 btn--xl mt-30 mt-sm-0">
											<span class="mr-2"><i class="ion-bag"></i></span>
											Add to cart
										</button>
									</div>
								</div>
								<div class="addto-whish-list">
									<a href="#"><i class="icon-heart"></i> Add to wishlist</a>
									<a href="#"><i class="icon-shuffle"></i> Add to compare</a>
								</div>
								<div class="pro-social-links mt-10">
									<ul class="d-flex align-items-center">
										<li class="share">Share</li>
										<li><a href="#"><i class="ion-social-facebook"></i></a></li>
										<li><a href="#"><i class="ion-social-twitter"></i></a></li>
										<li><a href="#"><i class="ion-social-google"></i></a></li>
										<li><a href="#"><i class="ion-social-pinterest"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- second modal -->
<div class="modal fade style2" id="compare" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<h5 class="title"><i class="fa fa-check"></i> Product added to compare.</h5>
			</div>
		</div>
	</div>
</div>
<!-- second modal -->
<div class="modal fade style3" id="add-to-cart" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header justify-content-center bg-dark">
				<h5 class="modal-title" id="add-to-cartCenterTitle"> <span class="ion-checkmark-round"></span> Product successfully added to your shopping cart</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-lg-5 divide-right">
						<div class="row">
							<div class="col-md-6">
								<img src="assets/img/modal/1.jpg" alt="img">
							</div>
							<div class="col-md-6 mb-2 mb-md-0">
								<h4 class="product-name">New Balance Running Arishi trainers in triple</h4>
								<h5 class="price">$$29.00</h5>
								<h6 class="color"><strong>Dimension: </strong>: <span class="dmc">40x60cm</span> </h6>
								<h6 class="quantity"><strong>Quantity:</strong>&nbsp;1</h6>
							</div>
						</div>
					</div>
					<div class="col-lg-7">
						<div class="modal-cart-content">
							<p class="cart-products-count">There is 1 item in your cart.</p>
							<p><strong>Total products:</strong>&nbsp;$123.72</p>
							<p><strong>Total shipping:</strong>&nbsp;$7.00 </p>
							<p><strong>Taxes</strong>&nbsp;$0.00</p>
							<p><strong>Total:</strong>&nbsp;$130.72 (tax excl.)</p>
							<div class="cart-content-btn">
								<button type="button" class="btn theme-btn--dark1 btn--md mt-4" data-dismiss="modal">Continue
									shopping</button>
								<button class="btn theme-btn--dark1 btn--md mt-4"><i
										class="ion-checkmark-round"></i>Proceed to
									checkout</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- modals end -->


<%@ include file="../common/Bottom.jsp"%>

<script src="assets/js/vendor/vendor.min.js"></script>
<script src="assets/js/plugins/plugins.min.js"></script>
<script src="assets/js/main.js"></script>


</body>

</html>